import React,{useState} from 'react'
import {Button} from 'antd'
import './home.css'
import {HashRouter,Switch,Route, Redirect,withRouter,useHistory} from 'react-router-dom'
import Canlader from '../../components/canlader'

import ClockIn from '../../components/clockIn'
import Search from '../../components/search'
import Task from '../../components/task'
import Location from '../../components/location'
import task from '../../assets/images/a复选框.png'
import ctask from '../../assets/images/c复选框.png'
import canlader from '../../assets/images/a日历.png'
import ccanlader from '../../assets/images/c日历.png'
import location from '../../assets/images/a位置.png'
import clocation from '../../assets/images/c位置.png'
import search from '../../assets/images/a搜索.png'
import csearch from '../../assets/images/c搜索.png'

export default function Index(props) {
    const [imgArray,setimgArray] = useState([{id:'1',img:task,imgSelect:ctask,path:'/task',done:true},{id:'2',img:canlader,imgSelect:ccanlader,path:'/canlader',done:false},{id:'3',img:location,imgSelect:clocation,path:'/location',done:false},{id:'4',img:search,imgSelect:csearch,path:'/search',done:false}])
    const [choosedId,setchoosedId] = useState('1')
    const history = useHistory()
    const checkoutTab=(e)=>{
        console.log(e.target.getAttribute('data-id'));
        const selectId = e.target.getAttribute('data-id');
        const filterData = imgArray.filter(item=>item.id==selectId);

        const mapData = imgArray.map(item=>{
            if(item.id==selectId){
                console.log(props.history.push(item.path));
                setchoosedId(selectId)
            }
            return item
        })
        // setimgArray(mapData)
    }
    return (
        <div>
            <div  className='container'>
                <div className='beside'>
                    <div className='my-head'>
                        <img src="" alt="" />
                    </div>
                    <ul onClick={checkoutTab}>
                        {imgArray.map(item=>{
                            return(<li key={item.id}>
                               <img data-id={item.id} src={item.id==choosedId?item.imgSelect:item.img} alt="" />
                               </li>)
                        })}
                       
                    </ul>
                </div>
                <div className='content'>
                    <Switch>
                        {/* <Redirect exact from='/' to='/login'></Redirect>
                        <Route path='/login' component={Login}></Route>
                        <Route path='/register' component={Register}></Route>
                        <Route path='/home' component={Home}></Route> */}
                        {/* <RouterAuth routes={routes}></RouterAuth> */}
                        <Redirect exact from='/' to='/task'></Redirect>
                        <Route path='/task' component={Task}></Route>
                        <Route path='/canlader' component={Canlader}></Route>
                        <Route path='/clockIn' component={ClockIn}></Route>
                        <Route path='/search' component={Search}></Route>
                        <Route path='/location' component={Location}></Route>
                    </Switch>
                </div>
            </div>
        </div>
    )
}

